<!doctype html>
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">

<head>
  <meta content="origin" name="referrer">
  <title>mapper</title>
  <script src="../build/g6.js"></script>
  <script src="../build/plugin.behaviour.analysis.js"></script>
  <script src="../build/plugin.tool.mapper.js"></script>
  <script src="./assets/jquery-3.2.1.min.js"></script>
</head>

<body>
  <div id='mountNode'></div>
  <div id='legend'></div>
  <script>
    const Mapper = G6.Plugins['tool.mapper']
    const edgeSizeMapper = new Mapper('edge', 'weight', 'size', [2, 20], {
      legendCfg: {
        layout: 'horizontal',
        title: {
          text: 'Edge Weight'
        }
      }
    });
    const nodeColorMapper = new Mapper('node', 'class', 'color', ['#BAE7FF', '#0050B3', '#ff50B3'], {
      legendCfg: {
        layout: 'horizontal',
        title: {
          text: 'Node Class'
        }
      }
    });
    const nodeSizeMapper = new Mapper('node', 'weight', 'size', [20, 40], {
      legendCfg: {
        layout: 'horizontal',
        title: {
          text: 'Node Weight'
        }
      }
    });
    const data = {
      nodes: [{
        id: 'node1',
        x: 100,
        y: 200,
        weight: 10,
        class: 'class_1'
      }, {
        id: 'node2',
        x: 300,
        y: 200,
        weight: 2,
        class: 'class_1'
      }, {
        id: 'node3',
        x: 100,
        y: 100,
        weight: 15,
        class: 'class_2'
      }, {
        id: 'node4',
        x: 300,
        y: 100,
        weight: 5,
        class: 'class_3'
      }],
      edges: [{
        target: 'node2',
        source: 'node1',
        weight: 5
      }, {
        target: 'node3',
        source: 'node2',
        weight: 20
      }, {
        target: 'node4',
        source: 'node3',
        weight: 50
      }]
    };
    const graph = new G6.Graph({
      id: 'mountNode', // dom id
      plugins: [nodeColorMapper, edgeSizeMapper, nodeSizeMapper],
      height: 1000,
    });
    graph.read(data);

  </script>
</body>
